<template>
  <div style="margin: 20px">
    <!--功能区-->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>功能区</span>
      </div>
      <div style="display: flex">
        <el-button type="success" @click="addOrUpdate('add')">添加教师账号</el-button>
        <el-button type="info" @click="exportData">导出教师数据</el-button>
        <el-button type="warning" @click="exportData('template')">下载导出模板</el-button>
        <el-upload
          style="margin-left: 10px"
          class="upload-demo"
          :action="importUrl"
          :file-list="fileList"
          :show-file-list="false"
          :on-success="handleSuccess"
          :limit="1">
          <el-button type="primary">Excel导入教师数据</el-button>
        </el-upload>
      </div>
    </el-card>
    <!--学院信息表-->
    <div>
      <el-card class="box-card" style="margin-top: 20px">
        <el-table
          :data="tableData"
          style="width: 100%">
          <el-table-column prop="id" label="id" v-if="false"/>
          <el-table-column prop="idNumber" label="教师号"/>
          <el-table-column prop="username" label="姓名"/>
          <el-table-column prop="sex" label="性别">
            <template slot-scope="scope">
              <el-tag type="success" v-if="scope.row.sex === '0'">男</el-tag>
              <el-tag type="warning" v-else-if="scope.row.sex === '1'">女</el-tag>
              <el-tag type="danger" v-else>未知</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="phone" label="电话">
            <template slot-scope="scope">{{ scope.row.phone ? scope.row.phone : '无数据' }}</template>
          </el-table-column>
          <el-table-column prop="email" label="邮箱">
            <template slot-scope="scope">{{ scope.row.email ? scope.row.email : '无数据' }}</template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini" type="warning" @click="resetPassword(scope.row)">重置密码</el-button>
              <el-button size="mini" type="primary" @click="addOrUpdate(scope.row)">编辑</el-button>
              <el-button size="mini" type="danger" @click="handleRemove(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--分页-->
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 20, 50]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalNum">
          </el-pagination>
        </div>
      </el-card>
    </div>
    <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible">
      <el-form label-position="right" ref="dialogForm" :model="form" label-width="80px">
        <el-form-item label="教师号">
          <el-input v-model="form.idNumber"></el-input>
        </el-form-item>
        <el-form-item label="用户名">
          <el-input v-model="form.username"></el-input>
        </el-form-item>
        <el-form-item label="电话号码">
          <el-input v-model="form.phone"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="form.email"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-radio-group v-model="form.sex">
            <el-radio label="0">男</el-radio>
            <el-radio label="1">女</el-radio>
            <el-radio label="2">不方便透露</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleCancel">取 消</el-button>
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { addTeacherApi, deleteTeacherApi, getAllTeacher, resetPasswordApi } from "@/api/AdminApi";
import { download } from "@/utils/request";

export default {
  name: "AddTeacher",
  data() {
    return {
      tableData: [],
      dialogTitle: '',
      importUrl:'http://localhost:8888/admin/importTeacher',
      form: {},
      fileList:[],
      dialogFormVisible: false,
      totalNum: 0,
      currentPage: 1,
      pageSize: 20,
    }
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val;
      this.getTopic(this.currentPage, this.pageSize)
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getTopic(this.currentPage, this.pageSize)
    },
    getAll() {
      let params = {
        current: this.currentPage,
        size: this.pageSize
      }
      getAllTeacher(params).then(res => {
        this.tableData = res.data.records;
        this.totalNum = res.data.total;
      })
    },
    addOrUpdate(tag) {
      if (tag === 'add') {
        this.dialogTitle = '添加教师账号'
        this.form = { sex: '2'}
        this.dialogFormVisible = true
      } else {
        this.dialogTitle = '编辑教师账号'
        this.form = {...tag}
        this.dialogFormVisible = true
      }
    },
    handleCancel() {
      this.$refs.dialogForm.resetFields()
      this.dialogFormVisible = false
    },
    handleSubmit() {
      addTeacherApi(this.form).then(res => {
        if (res.code === 200) {
          this.$message.success("操作成功")
        }
        this.dialogFormVisible = false
        this.getAll()
      })
    },
    handleRemove(row) {
      this.$confirm("此操作将永久删除该数据，是否删除？", "提示", {
        confirmButtonText:"确认",
        cancelButtonText:"取消",
        type:"warning"
      }).then(() => {
        let params = {
          teacherId: row.id
        }
        deleteTeacherApi(params).then(res => {
          if (res.code === 200) {
            this.$message.success("删除成功")
            this.getAll()
          }
        })
      }).catch(()=> {
        console.log("cancel")
      })
    },
    exportData(tag) {
      if (tag === 'template') {
        window.open("http://localhost:8080/importExcel/TeacherTemplate.xlsx")
        return
      }
      this.$confirm("是否导出教师数据？", "提示", {
        confirmButtonText:"确认",
        cancelButtonText:"取消",
        type:"warning"
      }).then(() => {
        download("http://localhost:8888/admin/exportTeacher", {})
      }).catch(()=> {
        console.log("cancel")
      })
    },
    handleSuccess() {
      this.fileList = []
      this.$message.success("导入成功")
      this.getAll()
    },
    resetPassword(row) {
      let params = {
        userId: row.id
      }
      this.$confirm("是否重置该教师密码？", "提示", {
        confirmButtonText:"确认",
        cancelButtonText:"取消",
        type:"warning"
      }).then(() => {
        resetPasswordApi(params).then(res => {
          if (res.code === 200) {
            this.$message.success("重置成功")
          }
        })
      }).catch(()=> {
        console.log("cancel")
      })
    }
  },
  created() {
    this.getAll()
  }
}
</script>

<style scoped>
.block {
  margin-top: 10px;
  width: 100%;
  display: inline-block;
  text-align: center;
}

</style>
